<!DOCTYPE html>
<html>

<head>
  <!-- USE DEVELOPMENT VERSION -->
  <script src="/konva.min.js"></script>
  <meta charset="utf-8" />
  <title>Konva 矩形拖动各边尺寸</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    var width = window.innerWidth
    var height = window.innerHeight

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    })

    var layer = new Konva.Layer()
    stage.add(layer)

    var text1 = new Konva.Text({
      x: 50,
      y: 70,
      name: "text1",
      fontSize: 30,
      text: 'text1 以中心点为基准  centeredScaling = true',
      draggable: true
    })
    layer.add(text1)

    var tr1 = new Konva.Transformer({
      name: "tr1",
      node: text1,
      // 缩放操作将以节点的中心为基准。
      centeredScaling: true,
      // 是否保持纵横比 缩放
      keepRatio: false,
    })
    layer.add(tr1)

    var text2 = new Konva.Text({
      x: 50,
      y: 200,
      name: "text2",
      fontSize: 30,
      text: 'centeredScaling = false',
      draggable: true
    })
    layer.add(text2)

    var tr2 = new Konva.Transformer({
      name: "tr2",
      node: text2,
      centeredScaling: false,
      // 限制拖拽的方向
      enabledAnchors: ['top-left', 'top-right', 'bottom-left']
    })
    layer.add(tr2)

    stage.on('click tap', function (e) {

      // 当前是 舞台
      // if (e.target === stage) {
      //   stage.find('Transformer').destroy()
      //   layer.draw()
      //   return
      // }
      // if (e.target === text1) {
      //   tr1.attachTo(text1)
      // } else if (e.target === text2) {
      //   tr2.attachTo(text2)
      // }

      layer.draw()

    })

    layer.draw();
  </script>
</body>

</html>